/* RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strike, strong, sub, sup,
tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }
table { border-spacing: 0; border-collapse: collapse; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
/* COMMON */
body {
  	font-family: Helvetica, Arial, sans-serif;
  	line-height: 1.4;
  	color: #4b4b4b;
  	background: #e4e4e4;
	margin-bottom: 20px;
}

.clear {
	clear: both;
	margin: 0;
	padding: 0;
	line-height: 0;
}

a {
  color: #2d7bb2;
  text-decoration: none;
  outline: none;
}
a:hover {
  color: #4b4b4b;
}
#errorExplanation {
  margin: 10px 0 0 0;
  padding: 10px 10px;
  background: #ffd7d7;
  -webkit-border-radius: 5px;
}
#errorExplanation h2 {
	font-size: 1em;
}

#errorExplanation p {
	font-size: 0.9em;
	margin-bottom: 5px;
}

#errorExplanation ul {
	font-size: 0.9em;
}

#errorExplanation li {
	margin-left: 20px;
}

.fieldWithErrors input {
	background: #ffd7d7;
}

#signup-box {
	color: #000;
	background: #ffe640;
	text-align: center;
	margin: 20px 0;
	padding: 0;
}

#signup-box a {
	color: #990000;
	font-weight: bold;
}

#signup-box p {
	padding: 10px;
}

#menu {
	font-size: 0.85em;
	color: #aeaeae;
	text-align: center;
	padding: 0 0 20px 0;
}

#menu a {
	background: url(../images/single-dot.gif) 0 50% no-repeat;
	margin-left: 6px;
	padding-left: 16px;
}

#menu a.first {
	background: none;
	margin: 0;
	padding: 0;
}

#page-content, #page-content-wide {
  padding: 40px 60px;
  margin: 30px auto;
  width: 400px;
  background: url(../inages/ear-big.gif) 0 0 no-repeat #fff;
}

#page-content-wide {
  width: 700px;
}

#logo {
  text-align: center;
}

.button {
    font-family: Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	margin: 0;
	color: #fff;
	font-weight: bold;
	background: #2D7BB2;
	border: 2px solid #2D7BB2;
	padding: 0.25em 6px;
	cursor: pointer;
	-webkit-border-radius: 5px;
}

.button:hover {
  border-color: #5B605D;
  background: #5B605D;
}

#footer {
	text-align: center;
}

#footer p {
  margin-top: 4px;
  font-size: 0.70em;
  color: #aeaeae;
}

.form_note {
	color: #ccc;
	font-size: 0.8em;
}

/* ERROR */

#error-page  {
	text-align: left;
}

#error-page  h1 {
	margin-top: 30px;
	font-size: 1.2em;
}

#error-page  p {
	margin-top: 15px;
}

/* LOGIN */
#login-page p {
   padding-top: 15px;
}

#login-page p#error, #login-page p#notice {
  	text-align: center;
  	margin: 10px 0 0 0;
  	padding: 4px 10px;
  	background: #ffd7d7;
  	-webkit-border-radius: 5px;
}

#login-page p#notice {
  	background: #e8f4d8;
}

#login-page p#remember {
  	font-size: 0.80em;
}
#login-page input#user_session_login, #login-page input#user_session_password, #login-page input#user_session_openid_identifier, #login-page #email, #login-page input#user_email, #login-page input#user_password, #login-page input#user_password_confirmation, input#user_instapaper_rss, input#recaptcha_response_field {
  	font-family: Helvetica, Arial, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
  	width: 100%;
    border: 1px solid #ccc;
    padding: 4px;
}

#recaptcha_image {
	margin: 20px 0 0 0;
}

#login-page input#user_session_openid_identifier {
    background: url(../images/login-bg.gif) no-repeat;
    background-color: #fff;
    background-position: 10px 50%;
    color: #000;
    padding-left: 30px;
	width: 93%;
}

#login-page a.id-note {
  	padding: 0;
  	font-size: 0.75em;
}

#login-page a.new_password, #login-page a.back_to_login {
  	font-size: 0.80em;
  	margin-left: 10px;
}

#login-page p#signup, #login-page p#what_will_happen {
  	border-top: 1px solid #e4e4e4;
  	margin: 20px -60px 0 -60px;
  	padding: 20px 60px 0;
  	text-align: center;
}

#login-page p#what_will_happen {
  	text-align: left;
}

/* SPLASH */
#splash-content {
  margin: 30px auto;
  padding: 40px 60px;
  background: url(../images/ear-big.gif) 0 0 no-repeat #fff;
}

#splash-page #logo {
	padding: 0;
	width: 100%;
	height: 95px;
	text-indent: -100000px;
	background: url("../images/logo-big.gif") 50% 0 no-repeat;
}

#splash-page #intro h3 {
	font-size: 1.5em;
  	font-weight: normal;
  	margin: 20px 0;
  	text-align: center;
}
#splash-page #menu {
  font-size: 1.5em;
  font-weight: bold;
  background: #b8e4f5;
  margin: 20px -60px;
  padding: 10px;
  text-align: center;
}
#splash-page #menu ul {
  list-style: none;
}
#splash-page #menu ul li {
  display: inline;
  margin-right: 30px;
}
#splash-page form {
  text-align: center;
}
#splash-page #intro-form {
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
  background: #b8e4f5;
}
#splash-page #intro-form p {
  margin-bottom: 5px;
}

#splash-page input.signup-email {
  	font-family: Helvetica, Arial, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
  	width: 50%;
    border: 1px solid #ccc;
    padding: 4px;
}
#splash-page .button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.9em;
    color: #fff;
    font-weight: bold;
    background: #2D7BB2;
    border: 2px solid #2D7BB2;
    padding: 0.25em 6px;
    cursor: pointer;
    -webkit-border-radius: 5px;
}
#splash-page #intro p strong a {
  	color: #9a2828;
  	font-size: 1.8em;
  	font-weight: bold;
}

#splash-page .columns {
	font-size: 0.85em;
	float: left;
  	text-align: center;
}

#splash-page .columns.first {
	margin: 20px 0 20px 0;
	padding-top: 20px;
	border-top: 1px solid #ccc;
}

#splash-page .columns.last {
	padding: 0;
}

#splash-page .column {
  float: left;
  text-align: left;
  width: 212px;
  margin-right: 20px;
}

#splash-page .column .last {
  margin: 0;
}
#splash-page #tour {
  text-align: center;
  clear: left;
}
#splash-page #tour img {
  margin: 40px 0 10px 0;
  border: 5px solid #e4e4e4;
}

#splash-page #sign-up {
	float: left;
	background: #d9f0ff;
	margin: 0 -60px 30px -60px;
	padding: 20px 60px 0px 60px;
	width: 700px;
}

#splash-page #sign-up .sign-up-column {
	width: 350px;
	float: left;
}

#splash-page #sign-up .sign-up-column.right {
	width: 220px;
	padding-top: 55px;
	text-align: center;
	padding-left: 100px;
}

#splash-page #sign-up .sign-up-column.right p {
	font-size: 0.9em;
}


#splash-page .how-column {
	width: 320px;
	float: left;
}

#splash-page .how-column.right {
	color: #ccc;
	padding-left: 40px;
	text-align: center;
	font-size: 0.8em;
}

#splash-page .how-column.right img {
	margin: 0 4px 4px 0;
	border: 1px solid #ccc;
}

#splash-page .how-column h3 {
	margin-bottom: 7px;
	font-size: 1.5em;
}


#splash-page .how-column ol {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

#splash-page .how-column ol li {
	padding-left: 30px;
	line-height: 1.5em;
	margin-bottom: 9px;
}

#splash-page .how-column ol li.one {
	background: url("../images/number-one.gif") 0 0 no-repeat;
}

#splash-page .how-column ol li.two {
	background: url("../images/number-two.gif") 0 0 no-repeat;
}

#splash-page .how-column ol li.three {
	background: url("../images/number-three.gif") 0 0 no-repeat;
}

#splash-page .how-column ol li.four {
	background: url("../images/number-four.gif") 0 0 no-repeat;
}

#splash-page .how-column ol li.five {
	background: url("../images/number-five.gif") 0 0 no-repeat;
}

#splash-page #newsletter {
  padding: 20px 0 0;
  margin: 20px 0;
  border-top: 1px solid #ccc;;
}
 
#splash-page #newsletter h4 {
  margin-bottom: 5px;
}
 
#splash-page #newsletter p, #splash-page #newsletter label {
	font-size: 0.85em;
	margin-bottom: 5px;
}
 
#splash-page #newsletter input.signup-email {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    width: 50%;
    border: 1px solid #ccc;
    padding: 4px;
}
 
#splash-page #thankyou-confirm {
  text-align: center;
  margin: 30px 0;
}

/* SIGN UP */
#signup-page p#intro {
  text-align: center;
}

#signup-page p {
   padding-top: 15px;
}

#signup-page p.wisely {
	color: #666;
   	font-size: 0.85em;
	border-top: 1px solid #e4e4e4;
  	margin: 20px -60px 0 -60px;
  	padding: 20px 60px 0;
}

#signup-page p#error, #signup-page p#notice {
  	text-align: center;
  	margin: 10px 0 0 0;
  	padding: 4px 10px;
  	background: #ffd7d7;
  	-webkit-border-radius: 5px;
}

#signup-page p#notice {
  	background: #e8f4d8;
}

#signup-page input#user_login, #signup-page input#user_email, #signup-page input#user_password, #signup-page input#user_password_confirmation, #signup-page input#user_openid_identifier, input#user_empty_field {
  	font-family: Helvetica, Arial, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
  	width: 100%;
    border: 1px solid #ccc;
    padding: 4px;
}
#signup-page input#user_openid_identifier {
     background: url(../images/login-bg.gif) no-repeat;
     background-color: #fff;
     background-position: 10px 50%;
     padding-left: 30px;
  	 width: 93%;
}

#signup-page a.id-note {
  padding: 0;
  font-size: 0.75em;
}

#signup-page #empty-field {
	display: none;
}

/* SETTINGS */
#settings-page p#notice, #settings-page p#error {
  	text-align: center;
  	margin: 10px 0 0 0;
  	padding: 4px 10px;
  	background: #e8f4d8;
  	-webkit-border-radius: 5px;
}

#settings-page p#error {
  	background: #ffd7d7;
}

#settings-page p#intro {
	text-align: center;
}

#settings-page p {
   	padding-top: 15px;
}

#settings-page input#user_login, #settings-page input#user_email, #settings-page input#user_openid_identifier, #settings-page input#user_password, #settings-page input#user_password_confirmation {
  	font-family: Helvetica, Arial, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
  	width: 100%;
    border: 1px solid #ccc;
    padding: 4px;
}

#settings-page input#user_identity_url {
    background: url(../images/login-bg.gif) no-repeat;
    background-color: #fff;
    background-position: 10px 50%;
    color: #000;
    padding-left: 30px;
	width: 93%;
}

#settings-page #export-links, #settings-page #cancel-account {
  	border-top: 7px solid #e4e4e4;
  	margin: 20px -60px -20px -60px;
  	padding: 20px 60px 0;
}

#settings-page #export-links{
  	margin-bottom: 20px;
}

/* CANCEL */
#cancel-page {
	text-align: center;
}

#cancel-page h3 {
	margin-top: 15px;
}

/* HELP */

#help-page h3 {
	margin-top: 20px;
}

#help-page h4 {
	margin-bottom: 5px;
}

#help-page p {
	margin-bottom: 20px;
}

#help-page .code {
	padding: 5px 10px ;
	border: 1px solid #ccc;
	margin-bottom: 20px;
	background: #eee;
	overflow: auto;
}

#help-page ul {
	list-style: none;
	margin-bottom: 20px;
}

/* ABOUT */

#about-page h3 {
	text-align: center;
	margin-top: 20px;
}

#about-page p {
	margin-bottom: 20px;
	font-size: 0.9em;
}

#about-page img.mh77 {
	float: left;
	padding: 2px;
	margin-right: 10px;
	border: 1px solid #ccc;
}

/* TOUR */
#tour-page p.tour {
	text-align: center;
}

#tour-page .tour-screenshot {
	margin: 40px 0;
	border: 5px solid #e4e4e4;
}

#tour-page ol {
	padding-left: 30px;
	margin-bottom: 30px;
}

#tour-page li {
	margin-bottom: 15px;
}

/* SCREENCASTS */

#screencasts-page p.video {
	margin: 30px 0;
	text-align: center;
}

#import-page #logo {
	margin-bottom: 30px;
}

#import-page h2 {
	margin-top: 15px;
	margin-bottom: 5px;
}

#import-page form {
	margin-top: 5px;
	background: #e4e4e4;
	padding: 5px;
}

#import-page .import-note {
	margin-top: 15px;
	padding: 10px;
	font-size: 0.8em;
	background: #ffffcc;
}

#import-page .import-note p {
	margin-top: 5px;
}
